<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <title>测试 mongodb API</title>
    <link rel='stylesheet' href='../res/adapter.css' />
    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="../res/adapter.js"></script>
    <style>
        td, th {padding:10px}
        input[type=text] {width:100%}
        tr > td:first-child {width:100px}
    </style>
</head>
<body class="body-margin">
<h3>测试 mongodb API</h3>
<table style="width:800px">
    <tr><td>col</td><td><input type="text" name="col" value="testcol"></td></tr>
    <tr><td>filter</td><td><input type="text" name="filter" value="{}"></td></tr>
    <tr><td>doc</td><td><input type="text" name="doc" value="{}"></td></tr>
    <tr><td>docs</td><td><input type="text" name="docs" value="{}"></td></tr>
    <tr><td>updater</td><td><input type="text" name="updater" value="{}"></td></tr>
    <tr><td>find-options</td><td><input type="text" name="options" value="{}"></td></tr>
    <tr><td colspan="2">
        <p><button>find</button>
        <button>findOne</button>
        <button>upsert</button>
        <button>save</button>
        <button>saveMany</button><p/>
        <p><button>findOneAndUpdate</button>
        <button>findOneAndReplace</button>
        <button>findOneAndDelete</button><p/>
        <p><button>updateMany</button>
        <button>updateOne</button>
        <button>deleteMany</button><p/>
    </td></tr>
    <tr><td>result</td></tr>
    <tr><td colspan="2">
        <iframe id="resultframe" name="resultframe" src="" style="width:100%;height:300px"></iframe>
    </td></tr>
</table>
<script>
    var fields = [ 'col','filter','doc','docs','updater','options'];
    var getParams = function(){
        var params = {};
        for (let field of fields){
            let dom = document.body.querySelector('input[name='+field+']');
            params[field] = dom.value;
        }
        return params;
    };

    document.body.querySelectorAll('button').forEach((btn)=>{
        btn.onclick = function(){
            window.postRequest('./' + btn.innerText, getParams(), 'resultframe');
        };
    });

</script>
</body>
</html>